<template>
  <el-scrollbar height="100%">
    <div class="w show">
      <!-- 主图片展示 -->
      <div>
        <img :src="currentImageUrl" alt="Main Image" class="main-image"/>
      </div>

      <!-- 小图预览 -->
      <div class="thumbnails">
        <el-carousel :interval="5000" type="card" indicator-position="none"
                     class="thumbnail" arrow="never" @change="handleCarouselChange">
          <el-carousel-item v-for="(item, index) in carouselData" :key="index">
            <img :src="BASE_URL + item.poster" alt="Thumbnail" @click="changeCarousel(index)"/>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="MaskLayer">
        <div class="content">
          <p class="title">{{ filmName }}</p>
          <p>{{ englishName }}</p>
          <p>{{ regionFormatter(regionList, null, region) }} </p>
          <p>{{ releaseDate }} 上映 </p>
        </div>
        <el-button type="primary"
                   @click="watchFilm"
                   class="btn">
          <el-icon class="el-icon-video-play">
            <VideoPlay/>
          </el-icon>
          观看视频
        </el-button>
      </div>
    </div>

    <div class="w movie">
      <div style="overflow: hidden">
        <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
        <div style="float: left;margin-left: 10px">
          <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">正在热播</span>
        </div>
      </div>

      <div style="margin-top: 20px">
        <el-card style="background-color: #0f1827;border: #0f1827;border-radius: 10px">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-image :src="BASE_URL + firstFilmData.poster"
                        @click="watchFirstFilm(firstFilmData.filmId)"
                        style="width: 180px;height: auto;"
                        alt="Film poster"/>
            </el-col>
            <el-col :span="9">
              <div style="margin-left: 20px;">
                <p style="font-size: 20px;font-weight: bold">{{ firstFilmData.filmName }}</p>
                <p style="font-size: 14px;"> ({{ firstFilmData.englishName }})</p>
                <p>{{ firstFilmData.directorName }}</p>
                <p>{{ tagFormatter(firstFilmData, null, firstFilmData.tag) }}</p>
                <p>{{ nationalityFormatter(firstFilmData, null, firstFilmData.region) }} / {{
                    firstFilmData.duration
                  }}分钟</p>
                <p>{{ firstFilmData.releaseDate }} 上映 </p>
                <p style="color: #ebbe56;;">电影评分 : {{ firstFilmData.filmRating }}分</p>
              </div>
            </el-col>
            <el-col :span="10">
              <div style="height: 180px;">
                <h3>影片简介</h3>
                <p style="font-size: 14px;">{{ firstFilmData.synopsis }}</p>
              </div>
              <div>
                <el-button type="primary"
                           style="position: absolute;bottom: 20px; left: 80%;width: 200px; height: 40px;
                                  background-color: #671523;border-radius: 30px; color: #fff; font-size: 16px; font-weight: bold;border: transparent;"
                           @click="watchFirstFilm(firstFilmData.filmId)"
                >
                  <el-icon class="el-icon-video-play">
                    <VideoPlay/>
                  </el-icon>
                  观看视频
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <div style="text-align: center;margin-top: 20px">
          <el-row :gutter="10">
            <el-col :span="4" v-for="item in otherFilmData">
              <div style="position: relative">
                <el-image :src="BASE_URL + item.poster"
                          style="width: 100%;height: auto;margin: 0 auto;position: relative;z-index: 1"
                          alt="Film poster"/>
                <div style="position: absolute;bottom: 0;left: 50%; transform: translateX(-50%);z-index: 2;
                        width: 100%;height: 100%;
                       background: linear-gradient(360deg, #0f1827 8%, rgba(15, 24, 39, 0) 70%);   "
                     @click="watchFilmById(item.filmId)">
                  <p style="position: absolute;bottom: 0;left: 50%;width: 100%;
             transform: translateX(-50%);z-index: 3;
             font-size: 16px;font-weight: bold;">{{ item.filmName }} </p>
                </div>

              </div>
              <el-button @click="watchFilmById(item.filmId)"
                         style="width: 100%;border-radius: 0 ; border: #671523;
                                background-color: #671523;color: #FFFFFF">观 看
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="w subject">
      <div style="overflow: hidden">
        <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
        <div style="float: left;margin-left: 10px">
          <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">电影专题</span>
        </div>
      </div>

      <div style="margin-top: 20px">
        <el-row :gutter="40">
          <el-col :span="16">
            <el-carousel height="400px" motion-blur>
              <el-carousel-item v-for="item in userSubjectData" :key="item">
                <img :src="BASE_URL + item.poster"
                     style="width: 100%;height: 400px;border-radius: 10px"
                     alt="item.subjectName">
                <div class="mask" @click="subjectById(item.id)"></div>
                <div class="subject-info">
                  <p> {{ item.subjectName }} : {{ item.description }}</p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="8">
            <div v-for="(item,index) in userSubjectData">
              <div v-if="index === 0">
                <img :src="BASE_URL + item.poster"
                     @click="subjectById(item.id)"
                     style="width: 100%;height: 190px;border-radius: 10px"
                     alt="item.subjectName">
              </div>
              <div v-if="index === 1 " style="margin-top: 10px;position: relative">
                <img :src="BASE_URL + item.poster"
                     @click="subjectById(item.id)"
                     style="width: 100%;height: 190px;border-radius: 10px;"
                     alt="item.subjectName">
              </div>
            </div>

          </el-col>
        </el-row>
      </div>
    </div>
    <component :is="footer"/>
  </el-scrollbar>
</template>

<script setup>
import {ref, onMounted, nextTick} from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";
import footer from "@/views/base/FooterView.vue"

const regionList = ref([]);
onMounted(() => {
  loadDictOptions(regionList, 'nationality');
});

const regionFormatter = (row, column, cellValue, index) => {
  if (!regionList.value) {
    return cellValue;
  }
  for (let item of regionList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
const carouselData = ref([]);
const carouselByStatus = () => {
  let data = qs.stringify({
    status: 1
  });
  axios.get(BASE_URL + '/v1/carousel/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          carouselData.value = response.data.data;
          if (carouselData.value.length > 0) {
            changeCarousel(0)
          }
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  carouselByStatus();
})
const currentImageUrl = ref('');

const changeCarousel = (index) => {
  currentImageUrl.value = BASE_URL + carouselData.value[index].poster;
  updateCurrentImage(index)
}
const handleCarouselChange = (newIndex) => {
  changeCarousel(newIndex);
  updateCurrentImage(newIndex)
}

const filmName = ref(''); // 当前图片的标题
const englishName = ref('');
const region = ref('');
const releaseDate = ref('');
const filmId = ref('');
const updateCurrentImage = (index) => {
  const currentItem = carouselData.value[index];
  filmName.value = currentItem.filmName;
  englishName.value = currentItem.englishName;
  region.value = currentItem.region;
  releaseDate.value = currentItem.releaseDate;
  filmId.value = currentItem.filmId;
}
const watchFilm = () => {
  router.push('/details?filmId=' + filmId.value)
}

const tagList = ref([]);
const nationalityList = ref([]);
onMounted(() => {
  loadDictOptions(tagList, 'tag');
  loadDictOptions(nationalityList, 'nationality');
});
const nationalityFormatter = (row, column, cellValue, index) => {
  if (!nationalityList.value) {
    return cellValue;
  }
  for (let item of nationalityList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
const tagFormatter = (row, column, cellValue, index) => {
  if (!tagList.value || !cellValue) {
    return cellValue;
  }
  // 将斜杠分隔的字符串转换为数组
  const tagsArray = cellValue.split('/');
  // 查找并替换每个标签值
  const formattedTags = tagsArray.map(tagValue => {
    for (let item of tagList.value) {
      if (item.value === tagValue) {
        return item.label; // 返回对应的汉字内容
      }
    }
    return tagValue; // 如果没有找到对应的汉字内容，则保留原始值
  });
  // 将格式化后的标签数组重新组合为字符串
  return formattedTags.join('  ');
};

const firstFilmData = ref([]);
const searchIn = () => {
  axios.get(BASE_URL + '/v1/filmSort/select/' + 1)
      .then((response) => {
        if (response.data.code === 2000) {
          firstFilmData.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchIn();
});
const otherFilmData = ref([]);
const searchOther = () => {
  axios.get(BASE_URL + '/v1/filmSort/select/notIn/' + 1)
      .then((response) => {
        if (response.data.code === 2000) {
          otherFilmData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchOther();
});
const watchFirstFilm = (filmId) => {
  router.push('/details?filmId=' + filmId)
}
const watchFilmById = (filmId) => {
  router.push('/details?filmId=' + filmId)
}
const userSubjectData = ref([]);
const searchUserSubject = () => {
  axios.get(BASE_URL + '/v1/subjectSort/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          userSubjectData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchUserSubject()
})
const subjectById = (id) => {
  router.push('/subjectDetails?id=' + id)
}
</script>

<style scoped>
.show {
  height: 400px;
  position: relative;
  overflow: hidden;
}

.main-image {
  float: right;
  width: 800px;
  height: 400px;
  border-radius: 10px;
}

.thumbnails {
  width: 600px;
  position: absolute;
  bottom: 50px;
  right: -100px;
  z-index: 2;
}

.thumbnail {
  height: 100px;
  margin: 0 auto;

  img {
    width: 150px;
    height: 90px;
    border: 2px solid #FFFFFF;
  }
}

.el-carousel__item--card {
  background-color: transparent;
  margin-left: 20px;
  width: 156px;
  height: 96px;
}

.MaskLayer {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 1200px;
  height: 400px;
  background: linear-gradient(115deg, #0f1827 40%, rgba(15, 24, 39, 0) 70%);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.btn {
  position: absolute;
  bottom: 40px;
  left: 100px;
  width: 200px;
  height: 40px;
  background-color: #671523;
  border-radius: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: transparent;
}

.el-icon-video-play {
  font-size: 20px;
  margin-right: 5px;
  font-weight: bold;
}

.content {
  position: absolute;
  top: 5%;
  left: 90px;
  font-size: 20px;
  color: #fff;

  p {
    margin-bottom: 10px;
  }
}

.title {
  font-size: 40px;
  font-weight: bold;
}

.movie {
  margin-top: 20px;
  height: 680px;
  position: relative;
  overflow: hidden;

  p, h3 {
    color: #FFFFFF;
  }
}

.subject {
  height: 500px;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(360deg, #0f1827 10%, rgba(15, 24, 39, 0) 70%);
}

.subject-info {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 30px;

  p {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
  }
}

</style>
